<!--
  author: tangcheng_cd
  create by: 2018/5/24
  descr:
-->
<template>
  <el-table
    :data="roleTableData"
    v-loading="roleTableLoading"
    class="userManaTable"
    ref="roleTable"
    @select="checkboxTable"
    @selection-change="handleRoleTableSelection">
    <!-- 扩展部分 -->
    <slot name="extendStartSlot"></slot>
    <el-table-column
      v-show="true"
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="角色名称"
      width="150"
    >
    </el-table-column>
    <el-table-column
      prop="remark"
      label="描述">
    </el-table-column>

    <!-- 扩展部分，例如操作按钮项 -->
    <slot name="extendEndSlot"></slot>
  </el-table>
</template>

<script type="text/ecmascript-6">
  import api from '../../../api/url'
  import ajax from '../../../api/ajax'

  import { mapMutations } from 'vuex'

  export default {
    name: 'role-grid',
    data () {
      return {
        roleTableData: [], // 表格角色数据
        roleTableLoading: false, // 数据是否加载中
        multipleSelection: [], // 表格中选择的数据
        roleId: []
      }
    },
    methods: {
      ...mapMutations({
        getCheckedMenuList: 'checkedMenuList'
      }),
      // 获取所有的选择记录
      getSelectionRecords () {
        return this.multipleSelection
      },
      // 获取所有的角色数据
      getAllRolesData () {
        // 角色数据加载中
        this.roleTableLoading = true
        ajax.post(api.GETALLROLES).then(res => {
          this.roleTableData = res.data
          // this.roleId = 45
          // 角色数据加载完毕
          this.roleTableLoading = false
        }).catch(e => {
          console.error('获取所有角色数据发生错误！')
        })
      },
          // 处理角色数据表格选择
      handleRoleTableSelection (val) {
        this.multipleSelection = val
},
      checkboxTable (selection, row) {
          let id = row.id
          ajax.post(api.GET_ASSIGNED_MENUS, {id}).then(res => {
          this.getCheckedMenuList([])
          this.getCheckedMenuList(res.data)
        }).catch(e => {
          console.error('获取所有角色数据发生错误！')
        })
},
      // 发送ID
      // sendID () {
      //   ajax.post(,this.roleId)
      // },
      // 清除选择项数据
      clearSelection () {
        this.multipleSelection = []
      }
    },
    created () {
      // 获取所有的角色数据
      this.getAllRolesData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
